<template>
    <view class="chatting-footer">
        <view class="icon-speech">
            <han-icon name="speech_input" size="50" />
        </view>

        <view class="input-container">
            <input
                class="message-input"
                placeholder="输入消息..."
                v-model="message"
                @confirm="sendMessage"
            />
        </view>

        <!-- 表情图标 -->
        <view class="icon-meme" @click="sendMessage">
            <han-icon name="meme" size="50" />
        </view>

        <!-- 更多图标 -->
        <view class="icon-more" @click="sendMessage">
            <han-icon name="more_chatting" size="50" />
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('');

const sendMessage = () => {
    if (message.value.trim()) {
        console.log('发送消息:', message.value);
        // TODO 这里应该调用发送消息的方法
        message.value = '';
    }
};
</script>

<style scoped lang="scss">
.chatting-footer {
    display: flex;
    align-items: center;
    padding: 10rpx 30rpx;
    border-top: 1rpx solid $han-global-border-color;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: $han-footed-bar-height;
    background: $han-global-bg-color;

    .input-container {
        flex: 1;
        border-radius: 40rpx;
        padding: 20rpx 30rpx;
        margin: 0 10rpx;

        .message-input {
            width: 100%;
            font-size: $han-font-size-base;
            color: #333;
        }
    }

    .icon-speech,
    .icon-meme,
    .icon-more {
        margin: 0 10rpx;
    }
}
</style>
